<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Mantenimiento Facturas</title>
        <link type="text/css" href="../../tablegrid/css/mtg/MyTableGrid.css" rel="stylesheet">
        <link type="text/css" href="../../tablegrid/css/mtg/calendar.css" rel="stylesheet"> 
        <script type="text/javascript" src="../../tablegrid/scripts/lib/prototype.js"></script>
        <script type="text/javascript" src="../../tablegrid/scripts/lib/scriptaculous.js"></script>
        <script type="text/javascript" src="../../tablegrid/scripts/mtg/format_american.js"></script> 
        <script type="text/javascript" src="../../tablegrid/scripts/mtg/MyTableGrid.js"></script>
        <script type="text/javascript" src="../../tablegrid/scripts/mtg/KeyTable.js"></script>
        <script type="text/javascript" src="../../tablegrid/scripts/mtg/controls.js"></script>

        <script type="text/javascript">
            var tableModel = {
                options : {
                    width: '640px',
                    title: 'Facturas',
                    addSettingBehavior : false,
                    pager: {
                        pageParameter : 'page'
                    },
                    rowClass : function(rowIdx) {
                        var className = '';
                        if (rowIdx % 2 == 0) {
                            className = 'hightlight';
                        }
                        return className;
                    },
                    toolbar : {
                        elements: [MyTableGrid.DEL_BTN, MyTableGrid.ADD_BTN, MyTableGrid.SAVE_BTN],
                        onSave: function() {
                            var newRowsAdded = tableGrid1.getNewRowsAdded();
                            var temp = '';
                            for (var i = 0; i < newRowsAdded.length; i++) {
                                temp += '{';
                                for (var p in newRowsAdded[i]) {
                                    temp += p + ' : ' + newRowsAdded[i][p] + ', ';
                                }
                                temp += '}\n';
                            }
                            alert('added rows: ' + temp);
                            var modifiedRows = tableGrid1.getModifiedRows();
                            temp = '';
                            for (var i = 0; i < modifiedRows.length; i++) {
                                temp += '{';
                                for (var p in modifiedRows[i]) {
                                    temp += p + ' : ' + modifiedRows[i][p] + ', ';
                                }
                                temp += '}\n';
                            }
                            alert('modified rows: ' + temp);
                    
                            var deletedRows = tableGrid1.getDeletedRows();
                            temp = '';
                            for (var i = 0; i < deletedRows.length; i++) {
                                temp += '{';
                                for (var p in deletedRows[i]) {
                                    temp += p + ' : ' + deletedRows[i][p] + ', ';
                                }
                                temp += '}\n';
                            }
                            alert('deleted rows: ' + temp);
                        },
                        onDelete:function(){alert("damn")}

                    }
                },
                columnModel : [
                    {
                        id : 'facturaId',
                        title : 'Id',
                        width : 30,
                        editable: true,
                        editor: 'checkbox',
                        sortable: true
                    },		
                    {
                        id : 'serie',
                        title : 'Serie',
                        width : 100,
                        editable: true
                    },
                    {
                        id : 'numero',
                        title : 'Numero',
                        width : 100,
                        editable: true
                    },
                    { 
                        id : 'fecha',
                        title : 'Fecha',
                        width : 150,
                        editable: true
                    },
                    {
                        id : 'total',
                        title : 'Total',
                        width : 150,
                        type: 'number',
                        editable: true
                    }
                ],
                url: 'allFacturas.php'
            };
            var tableGrid1 = null;
            window.onload = function() {
                tableGrid1 = new MyTableGrid(tableModel);
                tableGrid1.render('mytable1');
            };

        </script>
    </head>

    <body>
        <div id="mytable1" style="position:relative; width: 640px; height: 300px"></div>

    </body>
</html>